<template>
  <div class="container-bg" style="min-width: 1600px">
    <el-row :gutter="15" :span="12">

      <el-col :span="10">
        <el-form
          v-if="!isPalmVein"
          ref="elForm"
          width="600px"
          :model="entrancetGuardform"
          :rules="rules"
          size="medium"
          label-width="120px"
          style="max-width: 1200px"
        >
          <el-col :span="24">
            <div class="tab-line colorBlue">
              <div>门禁控制</div>
            </div>
            <el-form-item label="白光灯控制">
              <el-select
                v-model="entrancetGuardform.iLedControl"
                placeholder="请选择白光灯控制"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in iLedControlList"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-row v-if="entrancetGuardform.iLedControl == 1">
              <el-col :span="11">
                <el-form-item label="开启时间" prop="sStartTime">
                  <el-time-picker
                    style="width: 200px"
                    v-model="entrancetGuardform.sStartTime"
                    value-format="HH:mm"
                    format="HH:mm"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="结束时间" prop="sEndTime">
                  <el-time-picker
                    style="width: 200px"
                    v-model="entrancetGuardform.sEndTime"
                    value-format="HH:mm"
                    format="HH:mm"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <span style="margin-left: 50px; color: red;">
                  注意：如设置结束时间小于开始时间，代表结束时间为第二天
                </span>
                <br/>
                <br/>
              </el-col>
            </el-row>
            <el-form-item label="白光灯亮度" prop="iLedLuminance">
              <el-input-number
                class="textleft"
                v-model="entrancetGuardform.iLedLuminance"
                controls-position="right"
                :min="10"
                :max="100"
              />
              <span style="margin-left: 20px">10-100 (100为最大亮度)</span>
            </el-form-item>
            <el-form-item label="红外灯控制">
              <el-switch
                v-model="entrancetGuardform.iIrControl"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="红外灯亮度" prop="iIRLuminance">
              <el-input-number
                class="textleft"
                v-model="entrancetGuardform.iIRLuminance"
                controls-position="right"
                :min="10"
                :max="100"
              />
              <span style="margin-left: 20px">10-100 (100为最大亮度)</span>
            </el-form-item>
            <!--              <el-form-item label="时间">-->
            <!--                <el-switch v-model="form.isTimeShow"></el-switch>-->
            <!--              </el-form-item>-->
            <!--              <el-form-item label="IP">-->
            <!--                <el-switch v-model="form.isIPshow"></el-switch>-->
            <!--              </el-form-item>-->
            <!--              <el-form-item label="通行次数">-->
            <!--                <el-switch v-model="form.isAdoptCountShow"></el-switch>-->
            <!--              </el-form-item>-->
            <!--              <el-form-item label="名单数量">-->
            <!--                <el-switch v-model="form.isListCountShow"></el-switch>-->
            <!--              </el-form-item>-->
            <!--              <el-form-item label="日期显示">-->
            <!--                <el-switch v-model="form.isDateShow"></el-switch>-->
            <!--              </el-form-item>-->
            <!--              <el-form-item label="是否脱敏">-->
            <!--                <el-select v-model="form.isEncry" placeholder="请选择是否脱敏">-->
            <!--                  <el-option label="关" value="1"></el-option>-->
            <!--                  <el-option label="只显示姓" value="2"></el-option>-->
            <!--                  <el-option label="只显示姓和最后一个名" value="3"></el-option>-->
            <!--                  <el-option label="完全不显示" value="4"></el-option>-->
            <!--                </el-select>-->
            <!--              </el-form-item>-->
            <el-form-item label="识别距离" v-if="false">
              <el-select v-model="entrancetGuardform.recognitionDistance" placeholder="请选择识别距离">
                <el-option label="0.5" value="0.5"></el-option>
                <el-option label="1.0" value="1.0"></el-option>
                <el-option label="1.5" value="1.5"></el-option>
                <el-option label="2.0" value="32.0"></el-option>
                <el-option label="2.5" value="2.5"></el-option>
              </el-select>
              <span>（单位m）</span>
            </el-form-item>
            <el-form-item label="识别间隔时间" v-if="false">
              <el-select v-model="entrancetGuardform.gap" placeholder="请选择识别间隔时间">
                <el-option label="0" value="0"></el-option>
                <el-option label="1" value="1"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="5" value="5"></el-option>
              </el-select>
              <span>（单位s）</span>
            </el-form-item>
            <el-form-item>
              <!-- <el-button type="primary" @click="onSubmitEntrancetGuardform" -->
                <el-button type="primary" @click="submitForm('elForm')"
              >保存
              </el-button
              >
              <!-- <el-button>取消</el-button> -->
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>

      <el-col :span="14">
        <el-form
          ref="elForm2"
          width="600px"
          :model="gateForm"
          :rules="rules2"
          size="medium"
          label-width="130px"
        >
          <el-col :span="22">
            <div class="tab-line colorBlue">
              <div>闸机控制</div>
            </div>
            <el-form-item label="输出控制">
              <!-- <el-switch
                v-model="gateForm.iControlInterface"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              ></el-switch> -->

              <el-select
                v-model="gateForm.iControlInterface"
                placeholder="请选择输出控制"
              >
                <el-option label="关闭" :value="0"></el-option>
                <el-option label="开关量接口" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-row>
              <el-col :span="12" style="display: flex">
                <el-form-item label="输出保持时间T" prop="iOutputDurationTime">
                  <el-input-number
                    class="textleft"
                    v-model="gateForm.iOutputDurationTime"
                    controls-position="right"
                    :min="1"
                    :max="255"
                  />
                </el-form-item>
                <span
                  style="margin-left: 20px; margin-top: 7px; font-size: 14px"
                >
                1-255
              </span>
              </el-col>
              <!-- <el-col :span="2">
                <span>0-255</span>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="单位" label-width="50px">
                  <el-radio-group v-model="gateForm.sUnit">
                    <el-radio label="s">s</el-radio>
                    <el-radio label="ms">ms</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="开门动作">
              <el-select
                v-model="gateForm.iDoorAction"
                placeholder="请选择开门动作"
              >
                <el-option label="常开" :value="inActiveValue"></el-option>
                <el-option label="常闭" :value="activeValue"></el-option>
              </el-select>
              <span style="margin-left: 20px">常开表示平常释放</span>
            </el-form-item>
            <el-form-item label="脉冲周期t1" prop="iPulsePeriod">
              <el-input-number
                class="textleft"
                v-model="gateForm.iPulsePeriod"
                controls-position="right"
                :min="2"
                :max="100"
              />
              <span style="margin-left: 20px">2us-100us</span>
            </el-form-item>
            <el-form-item label="脉冲持续时间t2" prop="iPulseTH">
              <el-input-number
                class="textleft"
                v-model="gateForm.iPulseTH"
                controls-position="right"
                :min="2"
                :max="100"
              />
              <span style="margin-left: 20px">2us-100us (0.7t1 < t2 < t1)</span>
            </el-form-item>
            <!-- <el-form-item label="脉冲间隔时间">
              <el-input-number
                v-model="gateForm.iPulseTL"
                controls-position="right"
                :min="0"
                :max="255"
              />
              <span style="margin-left: 20px">(0-255)/100ms</span>
            </el-form-item> -->
            <div class="tab-line colorBlue">
              <div>读卡器</div>
            </div>
            <el-form-item label="接口">
              <el-radio-group v-model="gateForm.iCardReaderInterface">
                <el-radio :label="inActiveValue">Uart</el-radio>
                <el-radio :label="activeValue">USB</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="tab-line colorBlue">
              <div>韦根</div>
            </div>
            <el-form-item label="韦根是否开启">
              <el-switch
                v-model="entrancetGuardform.iWigandAgreement"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              />
            </el-form-item>
            <el-form-item label="韦根协议">
              <el-radio-group v-model="gateForm.iWigandAgreement1">
                <el-radio :label="inActiveValue">26位</el-radio>
                <el-radio :label="activeValue">30位</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="协议顺序">
              <el-radio-group v-model="gateForm.iWigandAgreement2">
                <el-radio :label="inActiveValue">正序</el-radio>
                <el-radio :label="activeValue">反序</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitGateForm"
              >保存
              </el-button
              >
              <!-- <el-button>取消</el-button> -->
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {
  getEntrancetGuardSystemControlApi,
  editEntrancetGuardSystemControlApi,
  getGateControlApi,
  editGateControlApi,
} from "@/api/intelligent";
import {getDeviceInfoDetailsApi} from "@/api/network";

export default {
  name: "MvCloudgateTerminalCloudGate",

  data() {
    var check_iPulseTH = (rule, value, callback) => {
      // console.log(rule, value, callback,value < this.gateForm.iPulsePeriod*0.7)
      if (!value) {
        return callback(new Error('脉冲周期T1不能为空'));
      }
      setTimeout(() => {
        if (!value) {
          callback(new Error('请输入'));
        } else {
          if (value <= this.gateForm.iPulsePeriod * 0.7) {
            callback(new Error('t2必须在(t2>0.7*t1)范围内'));
          } else if (this.gateForm.iPulsePeriod <= value) {
            callback(new Error('t2必须在(t2<t1)范围内'));
          } else {
            callback();
          }
        }
      }, 500);
    };
    return {
      isPalmVein: false,
      activeValue: 1,
      inActiveValue: 0,
      iLedControlList: [
        {
          label: "白色补光灯常亮",
          value: 0,
        },
        {
          label: "白色补光灯时间控制",
          value: 1,
        },
        {
          label: "白色补光灯常灭",
          value: 2,
        },
        {
          label: "无人后关闭",
          value: 3,
        },
      ],
      entrancetGuardform: {
        iLedControl: "",
        sStartTime: "",
        sEndTime: "",
        iLedLuminance: "",
        iIrControl: "",
        iIRLuminance: "",
      },
      gateForm: {
        iControlInterface: "",
        iOutputControl: "",
        iOutputDurationTime: "",
        sUnit: "",
        iDoorAction: "",
        iPulseTH: "",
        iPulsePeriod: "",
        iPulseTL: "",
        iCardReaderInterface: "",
      },
      rules: {
        sStartTime: [
          {required: true, message: "开启时间不能为空", trigger: "blur"},
        ],
        sEndTime: [
          {required: true, message: "结束时间不能为空", trigger: "blur"},
        ],
        iLedLuminance: [
          {required: true, message: "白光灯亮度不能为空", trigger: "blur"},
          { pattern:/^[0-9]*$/, trigger: "blur", message: '请输入正整数' },
        ],
        iIRLuminance: [
          {required: true, message: "红外灯亮度不能为空", trigger: "blur"},
          { pattern:/^[0-9]*$/, trigger: "blur", message: '请输入正整数' },
        ],
      },
      rules2: {
        iOutputDurationTime: [
          {required: true, message: "输出保持时间T不能为空", trigger: "blur"},
          { pattern:/^[0-9]*$/, trigger: "blur", message: '请输入正整数' },
        ],
        iPulsePeriod: [
          {required: true, message: "脉冲周期t1不能为空", trigger: "blur"},
          { pattern:/^[0-9]*$/, trigger: "blur", message: '请输入正整数' },
        ],
        iPulseTH: [
          {required: true, message: "脉冲持续时间t2不能为空", trigger: "blur"},
          {validator: check_iPulseTH, trigger: 'blur'},
          { pattern:/^[0-9]*$/, trigger: "blur", message: '请输入正整数' },
        ],
      },
    };
  },
  created() {
    this.getEntrancetGuardSystemControl();
    this.getGateControl();
  },
  mounted() {
    this.init()
  },

  methods: {
    getEntrancetGuardSystemControl() {
      getEntrancetGuardSystemControlApi().then((res) => {
        // console.log(res);
        this.entrancetGuardform = {...res};
      });
    },
    // onSubmitEntrancetGuardform() {
    submitForm(formName) {
      let self = this;
      this.$refs[formName].validate((valid) => {
        // this.$refs.elForm.validate((valid) => {
        if (valid) {
          editEntrancetGuardSystemControlApi(self.entrancetGuardform).then(
            (res) => {
              // console.log(res);
              self.$message.success("保存成功");
            }
          );
        }
      })

    },
    getGateControl() {
      getGateControlApi().then((res) => {
        // console.log(res);
        this.gateForm = {...res};
      });
    },
    onSubmitGateForm() {
      this.$refs.elForm2.validate((valid, fields) => {
        console.log(valid, fields)
        if (valid) {
          editGateControlApi(this.gateForm).then((res) => {
            // console.log(res);
            this.$message.success("保存成功");
          });
        }
      })

    },
    init() {
      getDeviceInfoDetailsApi().then(res => {
        // console.log('get',res.deviceType.deviceType.value)
        if (res.deviceType.deviceType.value == "PalmVein") {
          console.log("PalmVein")
          this.isPalmVein = true
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .textleft .el-input__inner {
  text-align: left;
}
.container-bg .colorBlue {
  background-color: #C6E2FF;
}
.tab-line {
  height: 40px;
  display: flex;
  justify-content: space-between;
  background-color: #f9f9f9;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 10px;

  .status-icon {
    position: relative;
    cursor: pointer;

    &::after {
      position: absolute;
      content: "";
      left: -10px;
      top: -10px;
      width: 20px;
      height: 20px;
      border-width: 1px;
      border-style: solid;
      border-color: #006eff;
      border-radius: 50%;
    }
  }

  .actives {
    &::before {
      position: absolute;
      content: "";
      left: -6px;
      top: -6px;
      width: 12px;
      height: 12px;
      background-color: #006eff;
      border-radius: 50%;
    }
  }
}
</style>
